<template>
	<view :style="[AppSkinVar]">
		<scroll-view scroll-y @scrolltolower="getData" lower-threshold="60">
			<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" :show="!listLength"></empty>
			<view v-for="(item, index) in list" :key="item.createTime">
				<view class="time">
					{{ item.createTime }}
				</view>
				<view @tap="$goTo('/pages/classify/goods/info/index',  { id: items.product.id })"
					v-for="(items, indexs) in item.goodsList" :key="items.id">
					<goods :info="items.product" @del="id => del(id, index, indexs)"></goods>
				</view>
			</view>

			<load-more v-if="listLength" :showLoad="showLoad"></load-more>
			<view style="height: 140rpx;"></view>
		</scroll-view>
		<view class="fixed-button  bg-white" v-if="listLength">
			<e-button size="large" type="primary" shape="circle" :text="$t('user.清空足迹')"
				@click="clearAll"></e-button>
		</view>
	</view>
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	// 所有可被装修选中的页面的混入，用于动态修改标题，例如装修的按钮组组件，按钮的文本为xxx，跳转到对应页面时，会将页面的标题修改为xxx
	import layoutPageTitleMixIn from '@/common/mixin/layoutPageTitleMixIn'
	export default defineComponent({
		mixins: [layoutPageTitleMixIn],
	})
</script>
<script setup lang="ts">
	import { ref } from 'vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { getFootmarkList, postDelFootmark, postClearFootmark } from '@/common/request/api'
	const ctx = useCurrentInstance()
	import {
		onShow
	} from '@dcloudio/uni-app'
	import goods from './child/goods-card.vue'


	const showLoad = ref(false)
	const pageNum = ref(1)
	const isGet = ref(true)
	const list = ref([])
	const listLength = ref(0)


	const getData = () => {
		if (isGet.value) {
			let data = {
				pageNum: pageNum.value,
				pageSize: 10
			}
			showLoad.value = true
			getFootmarkList(data).then((res : any) => {
				if (res.code == 200) {
					listLength.value = listLength.value + (res.rows?.length || 0)
					showLoad.value = false
					pageNum.value++
					res.rows.forEach((item : any) => {
						let index = list.value.findIndex((items : any) => item.createTime == items.createTime)
						if (index > -1) {
							list.value[index].goodsList.push(item)
						} else {
							list.value.push({
								createTime: item.createTime,
								goodsList: [item]
							})
						}
					})
					if (listLength.value >= res.total) {
						isGet.value = false
						showLoad.value = false
					}
				}
			})
		}
	}

	const del = (id : number | string, index : number, indexs : number) => {
		ctx.$showModal({
			content: ctx.$t('user.确定要删除这条足迹'),
			success: res => {
				if (res.confirm) {
					postDelFootmark(id).then(res => {
						if (res.code == 200) {

							if (list.value[index].goodsList.length == 1) {
								list.value.splice(index, 1)
							} else {
								list.value[index].goodsList.splice(indexs, 1)
							}
						}
					})
				}
			}
		})
	}
	const clearAll = () => {
		ctx.$showModal({
			content: ctx.$t('user.确定要清空我的足迹吗'),
			success: res => {
				if (res.confirm) {
					postClearFootmark().then(res => {
						if (res.code == 200) {
							list.value = []
							pageNum.value = 1
							isGet.value = true
							getData()
						}
					})
				}
			}
		})
	}
	onShow(() => {
		getData()
	})
</script>

<style lang="scss" scoped>
	scroll-view {
		height: 100vh;

		.time {
			padding: 20rpx 30rpx;
			color: #989898;
		}
	}

	.fixed-button {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 20rpx 30rpx;
		width: 100%;
		height: 140rpx;
	}
</style>